<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>N6_1F储位管理 - 自动</title>
  <%@include file="/WEB-INF/common/css.jsp"%>
  <style>
  	.myclass thead tr th
  	, .myclass tbody tr td{
  		text-align: center;
  	}
  	.selectstyle{
  		margin-top: 10px;
  	}
  </style>
  <%@include file="/WEB-INF/common/topjs.jsp"%>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  
  <%@include file="/WEB-INF/common/jsp/header.jsp"%>
  
  <div class="layui-body" style="left: 10px;padding-right: 50px;padding-left: 50px">
    <!-- 内容主体区域 -->
    	<br><br>
    	<div id="jiemian1" class="layui-row">
    		 <div class="layui-col-md3">
				<table class="layui-table  myclass" id="listshow1" border="1">
					<thead>
						<tr style="background: #399ddb;color: #fff">
							<th>机种</th>
							<th>状态</th>
							<th>数量</th>
						</tr>
					</thead>
					<tbody>
		
					</tbody>
				</table>
			 </div>
			 <div class="layui-col-md3">
			    <table class="layui-table  myclass" id="listshow2" border="1">
					<thead>
						<tr style="background: #399ddb;color: #fff">
							<th>机种</th>
							<th>状态</th>
							<th>数量</th>
						</tr>
					</thead>
					<tbody>
		
					</tbody>
				</table>
			 </div>
			<div class="layui-col-md3">
			    <table class="layui-table  myclass" id="listshow3" border="1">
					<thead>
						<tr style="background: #399ddb;color: #fff">
							<th>机种</th>
							<th>状态</th>
							<th>数量</th>
						</tr>
					</thead>
					<tbody>
		
					</tbody>
				</table>
			 </div>
			 <div class="layui-col-md3">
			    <table class="layui-table myclass" id="listshow4" border="1">
					<thead>
						<tr style="background: #399ddb;color: #fff">
							<th>机种</th>
							<th>状态</th>
							<th>数量</th>
						</tr>
					</thead>
					<tbody>
		
					</tbody>
				</table>
			 </div>
    	</div>
    	
    	<div id="jiemian2" style="display:none" class="layui-row">
    		<div class="layui-col-md12"><button class="layui-btn layui-btn-normal" onclick="toJiemian1()">点我返回哟</button></div>
    		<div class="layui-col-md12" id="totalShow" style="padding: 10px;font-size: 18px;"></div>
    		<div class="layui-col-md3">
				<table class="layui-table myclass" id="listshow1_1" border="1">
					<thead>
						<tr style="background: #399ddb;color: #fff"><th colspan=3></th></tr>
						<tr style="background: #944cd8;color: #fff"><th colspan=3></th></tr>
						<tr style="background: #33abca;color: #fff">
							<th>大储位</th>
							<th>小储位</th>
							<th>数量</th>
						</tr>
					</thead>
					<tbody>
		
					</tbody>
				</table>
			 </div>
			 <div class="layui-col-md3">
			    <table class="layui-table myclass" id="listshow2_1" border="1">
					<thead>
						<tr style="background: #399ddb;color: #fff"><th colspan=3></th></tr>
						<tr style="background: #944cd8;color: #fff"><th colspan=3></th></tr>
						<tr style="background: #33abca;color: #fff">
							<th>大储位</th>
							<th>数量</th>
						</tr>
					</thead>
					<tbody>
		
					</tbody>
				</table>
			 </div>
			<div class="layui-col-md3">
			    <table class="layui-table myclass" id="listshow3_1" border="1">
					<thead>
						<tr style="background: #399ddb;color: #fff"><th colspan=3></th></tr>
						<tr style="background: #944cd8;color: #fff"><th colspan=3></th></tr>
						<tr style="background: #33abca;color: #fff">
							<th>大储位</th>
							<th>数量</th>
						</tr>
					</thead>
					<tbody>
		
					</tbody>
				</table>
			 </div>
			 <div class="layui-col-md3">
			    <table class="layui-table myclass" id="listshow4_1" border="1">
					<thead>
						<tr style="background: #399ddb;color: #fff"><th colspan=3></th></tr>
						<tr style="background: #944cd8;color: #fff"><th colspan=3></th></tr>
						<tr style="background: #33abca;color: #fff">
							<th>大储位</th>
							<th>数量</th>
						</tr>
					</thead>
					<tbody>
		
					</tbody>
				</table>
			 </div>
    	</div>
  </div>
  
  <%@include file="/WEB-INF/common/jsp/footer.jsp"%>
</div>
<%@include file="/WEB-INF/common/bottomjs.jsp"%>
<script>

$(function(){
	showData();
})

function toJiemian1(){
	$("#jiemian2").slideUp('slow', function(){
		$("#jiemian1").slideDown('slow');
	});
}

function toJiemian2(){
	$("#jiemian1").slideUp('slow', function(){
		$("#jiemian2").slideDown('slow');
	});
}

function showData(){
	var hqlhHtml = "<img src='${base}/assets/image/alertemoj/hkl.gif' width='300px'/><br>";
	hqlhHtml += "<h4 style='text-align: center;font-size: 23px;margin-top: 27px;color:#149e5e;font-weight: bold'>不急，不急，数据正在火速从网线中爬过来</h4>";
	
	var hqlhAreat = layer.open({
		title : '感觉自己萌萌哒',
		content : hqlhHtml,
		btn:[],
		closeBtn: 0
	});
	$.ajax({
		url:"${base}/api/dataSummary/list3.api",
    	type: "post",
    	headers: Apicheck.getHeaders(),
    	success: function(result){
    		layer.close(hqlhAreat);
    		console.log(result)
    		if(result.code == 1001){
    			$("#listshow1 tbody").html("");
        		$("#listshow2 tbody").html("");
        		$("#listshow3 tbody").html("");
        		$("#listshow4 tbody").html("");
        		
        		for(var i = 0; i < result.data.length; i += 4){
        			for(var j = 0; j < 4; j ++){
        				if(i + j < result.data.length){
    	        			$("#listshow"+(j + 1)+" tbody").append("<tr>" 
    	            				+ "<td rowspan=3 style='border-bottom: 2px solid #fff;background-color: #9bd8d9;color: #3d3146;font-weight: bold;'>"+(result.data[i + j].machine=="All"?"All 机种":result.data[i + j].machine)+"</td>"
    	            				+ "<td class='zheshigeshabi' style='background:#f8a4b9;color: #680e77;font-weight: bold;' machine='"+result.data[i + j].machine+"'>U</td>"
    	            				+ "<td style='background:#f8a4b9;color: #680e77;font-weight: bold;'>"+result.data[i + j].U+"</td>"
    	            				+ "</tr>");
    	           			$("#listshow"+(j + 1)+" tbody").append("<tr>" 
    	               				+ "<td class='zheshigeshabi' style='background:#f8a4b9;color: #8c0a09;font-weight: bold;' machine='"+result.data[i + j].machine+"'>B</td>"
    	               				+ "<td style='background:#f8a4b9;color: #8c0a09;font-weight: bold;'>"+result.data[i + j].B+"</td>"
    	               				+ "</tr>");
    	           			$("#listshow"+(j + 1)+" tbody").append("<tr>" 
    	               				+ "<td class='zheshigeshabi' style='border-bottom: 2px solid #fff;background:#f8a4b9;color: #098c87;font-weight: bold;' machine='"+result.data[i + j].machine+"'>Q</td>"
    	               				+ "<td style='border-bottom: 2px solid #fff;background:#f8a4b9;color: #098c87;font-weight: bold;'>"+result.data[i + j].Q+"</td>"
    	               				+ "</tr>");
            			}
        			}
        		}
        		$(".zheshigeshabi").mouseover(function(){
        			$(this).addClass("layui-anim layui-anim-scale");
        			$(this).css({"border-radius": "20px"});
        		});
        		$(".zheshigeshabi").click(function(){
        			var machine = $(this).attr("machine");
        			var gjehState = $(this).html();
        			showJiemian2Data(machine, gjehState);
        		});
				$(".zheshigeshabi").mouseout(function(){
					$(this).removeClass("layui-anim layui-anim-scale");
					$(this).css({"border-radius": "0px"});
        		});
    		}
    	}
    });
}
function showJiemian2Data(machine, gjehState){
	var hqlhHtml = "<img src='${base}/assets/image/alertemoj/hkl.gif' width='300px'/><br>";
	hqlhHtml += "<h4 style='text-align: center;font-size: 23px;margin-top: 27px;color:#149e5e;font-weight: bold'>不急，不急，数据正在火速从网线中爬过来</h4>";
	
	var hqlhAreat = layer.open({
		title : '感觉自己萌萌哒',
		content : hqlhHtml,
		btn:[],
		closeBtn: 0
	});
	$.ajax({
		url:"${base}/api/dataSummary/list3_1.api",
    	type: "post",
    	headers: Apicheck.getHeaders(),
    	data:{machine:machine, gjehState:gjehState},
    	success: function(result){
    		layer.close(hqlhAreat);
    		console.log(result)
    		$("#totalShow").html("[<span style='color:green'>机种:"+(machine=="All"?"All 机种":machine)+"</span>] [<span style='color:gray'>状态:"+gjehState+" </span>] [<span style='color:blue'>total:"+(result.data["D0" + 1].total + result.data["D0" + 2].total + result.data["D0" + 3].total + result.data["D0" + 4].total)+"</span>] PCS储位分布");
    		if(result.code == 1001){
    			for(var i = 1; i <= 4; i ++){
    				var d = result.data["D0" + i];
    				console.log(d);
					$($("#listshow" + i + "_1 thead tr th").get(0)).html("D0" + i);
					$($("#listshow" + i + "_1 thead tr th").get(1)).html("Total: " + d.total);
					$("#listshow" + i + "_1 tbody").html("");
					for(var j = 0; j < d.data.length; j ++){
						if(i > 1){
							$("#listshow" + i + "_1 tbody").append("<tr>" 
	            				+ "<td style='background-color: #9bd8d9;color: #3d3146;font-weight: bold;'>"+d.data[j].dachuwei+"</td>"
	            				+ "<td style='background:#f8a4b9;color: #680e77;font-weight: bold;'>"+d.data[j].sum+"</td>"
	            				+ "</tr>");
						}else{
							for(var t = 0; t < d.data[j].xiaochuwei.length; t ++){
								var tr = "<tr>";
								if(t == 0){
			            			tr += "<td rowspan='"+d.data[j].xiaochuwei.length+"' style='background-color: #9bd8d9;color: #3d3146;font-weight: bold;'>"+d.data[j].dachuwei+"</td>";
								}
			            		tr += "<td style='background:#f8a4b9;color: #680e77;font-weight: bold;'>"+d.data[j].xiaochuwei[t].xiaoChuwei+"</td>";
			            		tr += "<td style='background:#f8a4b9;color: #680e77;font-weight: bold;'>"+d.data[j].xiaochuwei[t].sum+"</td>";
			            		tr += "</tr>";
			            		$("#listshow" + i + "_1 tbody").append(tr);
							}
						}
    				}
    			}
    			
    			toJiemian2();
    		}
    	}
	});
}
</script>
</body>
</html>